<template>
  <div class="goodslist_container">
    <van-pull-refresh v-model="RefreshThe" @refresh="onRefresh">
      <van-list
        :offset="300"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <GoodsLists
          v-for="item in goods"
          :key="item.id"
          :data="item"
          @click="handle"
        >
          <template #footer>
            <div class="area">
              <div class="price">
                <!-- <span>&yen; 2195</span> -->
                <span>&yen; {{ item.sell_price }}</span>
                <span>{{ item.buy }}</span>
                <span>&yen; 2499</span>
              </div>
              <div class="info">
                <span>热卖中</span>
                <span>剩余60件</span>
              </div>
            </div>
          </template>
        </GoodsLists>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { fetchGoodsList } from "@/api/index.js";
import GoodsLists from "@/components/Goods.vue";
export default {
  name:"myGoodsList",
  data() {
    return {
      page: 0,
      limit: 8,
      goods: [],
      loading: false, // 控制是否在加载中
      finished: false, // 控制是否加载完成
      RefreshThe: false, // 控制是否在刷新中...
    };
  },
  created() {
    this._fetchGoodsList();
  },
  methods: {
    async _fetchGoodsList() {
      //   正在刷新中则把数据清空
      if (this.RefreshThe) {
        this.goods = [];
        this.RefreshThe = false;
      }
      let { message } = await fetchGoodsList(this.page, this.limit);
      this.goods = [...this.goods, ...message];
      this.loading = false; // 加载完毕

      if (message.length === 0) {
        this.goods.length % 2 === 1 && this.goods.pop();
        this.finished = true;
      }
    },
    handle(data, event) {
      this.$router.push("/goodsdetail/" + data.id);
    },
    onLoad() {
      console.log("子东默认onLoad会加载一次");
      this.page++;
      // 子东默认会加载一次
      this._fetchGoodsList();
    },
    onRefresh() {
      console.log("onRefresh刷新");
      this.page = 0;
      // 清空页面列表的数据
      this.finished = false;
      // 重新加载页面的数据
      // loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },

  components: {
    GoodsLists,
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/scss/var.scss";
.goodslist_container {
  display: flex;
  flex-wrap: wrap;
  padding: 6px;
  justify-content: space-around;
  background: $bgColor;
  .van-list {
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-around;
    .item {
      border-radius: 10px;
      width: 50%;
      box-shadow: 0 0 2px #ccc;
    }
    ::v-deep .van-list__finished-text {
      text-align: center;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .area {
    color: #787272;
    .price {
      display: flex;
      justify-content: space-between;
    }
    .info {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
